<template>
  <div id="app">
   <router-view />
   <!-- 拖拽球 -->
   <div class="Customer"
   id='box'
   v-show="flags"
   @click="goEmail"
   @touchstart='down'
   @touchmove='move'
   @touchend='up'
   >
<van-icon name="invitation" color="#fff"/>
   </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flags: true, //开启
      position: { x: 0, y: 0 }, //位置
      mx: "", //鼠标移动x
      my: "", //鼠标移动y
      ux: "", //鼠标按下x
      uy: "", //鼠标按下y
      maxW: 0, //可视窗口宽
      maxH: 0 //可视窗口高
    };
  },

  mounted() {
    this.maxW = document.documentElement.clientWidth;
    this.maxH = document.documentElement.clientHeight;
  },

  methods: {
    goEmail() {
      this.$router.push("/email");
    },
    down(e) {
      this.flags = true;
      console.log(e);
      var touch;
      if (e.touches) {
        touch = e.touches[0];
      }
      this.ux = touch.clientX;
      this.uy = touch.clientY;
    },
    move(ev) {
      if (this.flags) {
        ev.preventDefault(); //阻止默认事件
        let box = document.querySelector("#box");
        var touch;
        if (ev.touches) {
          touch = ev.touches[0];
        }
        this.mx = touch.clientX - this.position.x;
        this.my = touch.clientY - this.position.y;
        if (this.mx < 0) {
          this.mx = 0;
        } else if (this.mx >= this.maxW) {
          this.mx = this.maxW;
        }
        if (this.my < 0) {
          this.my = 0;
        } else if (this.my >= this.maxH) {
          this.my = this.maxH;
        }
        box.style.left = this.mx - 30 + "px";
        box.style.top = this.my - 30 + "px";
      }
    },
    up() {
      this.flags = true;
    }
  }
};
</script>
<style lang="scss">
#app,
body,
html {
  width: 100%;
  height: 100%;
  background: rgb(242, 243, 245);
}

.Customer {
  width: 1.75rem;
  height: 1.75rem;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  background: #007aff;
  position: fixed;
  bottom: 3.4rem;
  right: 0.625rem;
  z-index: 9999;
  .van-icon {
    padding-top: 0.45rem;
    font-size: 0.8rem;
  }
}
</style>
